<template>
    <div>
        <left-menu></left-menu>
        <div class="main">
            <main-head></main-head>
            <div class="panel panel-default">
                <div class="panel-heading">
                    用户列表
                </div>
                <div class="panel-body">
                    <table class="table table-striped">
                        <thead>
                        <tr>
                            <th>#</th>
                            <th>用户名</th>
                            <th>邮箱</th>
                            <th>创建时间</th>
                            <th>操作</th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr v-for="(val,key) in items">
                            <th scope="row">{{val.id}}</th>
                            <td>{{val.name}}</td>
                            <td>{{val.email}}</td>
                            <td>{{val.created_at}}</td>
                            <td>操作</td>
                        </tr>
                        </tbody>
                    </table>
                    <div class="block">
                        <el-pagination
                                @current-change="clickCallback"
                                :current-page.sync="currentPage"
                                layout="total, prev, pager, next"
                                :total="total">
                        </el-pagination>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
    import LeftMenu from '../menu.vue';
    import MainHead from '../head.vue';
    export default {
        data() {
            return {
                currentPage: 1,//当前页码
                total: 0, //总行数
                items: [],
                param: {
                    page: 1,
                },
            }
        },
        methods: {
            clickCallback(pageNum) {
                var _this = this;
                _this.param.page = pageNum;
                _this.getList();
            },
            getList: function (event){
                var _this = this;
                axios.post('/api/users', _this.param)
                    .then(function (res) {
                        if(res.data.code === 200){
                            _this.items = res.data.data.data;
                            _this.currentPage = res.data.data.current_page;
                            _this.total = res.data.data.total;
                        }else {
                            _this.$message({
                                showClose: true,
                                message: res.data.msg,
                                type: 'error'
                            });
                        }
                    })
                    .catch(function (error) {
                        _this.$message({
                            showClose: true,
                            message: error,
                            type: 'error'
                        });
                    });
            },
        },
        mounted() {
            this.getList();
        },
        components: {
            LeftMenu,
            MainHead,
        }
    }
</script>
